import React, { Component } from 'react'
import { connect } from 'react-redux'
import { QaAction, QaFooterAction } from '../../actions'
import { EventCenter } from '../../utils/Global'

class LinkListItem extends Component {
  clickItem = () => {
    const { item, dispatch, footer_value, select_links } = this.props
    const { setSelectLinks, toggleShowLink, setSearchValue } = QaAction
    const { setFooterValue } = QaFooterAction
    dispatch(toggleShowLink(false))
    dispatch(setSearchValue(''))
    const currentFooterValue = footer_value + item.nickname + ' '
    dispatch(setFooterValue(currentFooterValue))
    const currentSelectLinks = select_links.concat([item])
    dispatch(setSelectLinks(currentSelectLinks))
    EventCenter.emit('focus_footer_input')
  }
  render() {
    const { item, index } = this.props
    return (
      <div className="link_item" onClick={this.clickItem}>
        <div className={index === 0 ? "link_item_inner no_border" : "link_item_inner"}>
          <img className="link_item_head" src={item.headimgurl} alt="" />
          <div className="link_item_name">{item.nickname}</div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { ...state.QaState, footer_value: state.QaFooterState.footer_value }
}

export default connect(mapStateToProps)(LinkListItem)
